
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="shortcut icon" href="images/favicon.ico">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/bootstrap-slider.min.css">
		
		<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
		
		<script src="js/bootstrap-slider.min.js"></script>
		
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	
		<section class="header text-center">
			<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
				<div class="container"><a class="navbar-brand" href="index.html"><i class="fas fa-shopping-bag primary-color mr-1"></i> Aurum</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
					<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
						<ul class="navbar-nav mt-2 mt-md-0">
							<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
							<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop </a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
									<div class="container">
										<div class="divider"></div>
										<div class="row">
											<div class="col-md-2">
												<h6 class="text-uppercase">Women's</h6>
												<ul class="nav flex-column">
													<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												</ul>
											</div>
											<div class="col-md-2">
												<h6 class="text-uppercase">Men's</h6>
												<ul class="nav flex-column">
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												</ul>
											</div>
											<div class="col-md-2">
												<h6 class="text-uppercase">Girl's</h6>
												<ul class="nav flex-column">
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												</ul>
											</div>
											<div class="col-md-2">
												<h6 class="text-uppercase">Boy's</h6>
												<ul class="nav flex-column">
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
													<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												</ul>
											</div>
											<div class="col-md-4">
												<h6 class="text-uppercase">Featured Items</h6>
												<div class="row">
													<div class="col-6 text-center"><a href="item.html">
														<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
														<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
														<p><span class="emphasis">$49.00</span></p>
														<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
												<p></div>
													<div class="col-6 text-center"><a href="item.html">
														<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
														<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
														<p><span class="emphasis">$49.00</span></p>
														<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
												<p></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages </a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="catalog.html">Catalog</a>
									<a class="dropdown-item" href="item.html">Item Detail</a>
									<a class="dropdown-item" href="cart.html">Cart</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="contact.html">Contact</a></div>
							</li>
							<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
							<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
								<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
									<h6>3 Items <span class="emphasis">$147.00</span></h6>
									<div class="dropdown-divider"></div>
									<ul class="shopping-cart-items">
										<li class="row">
											<div class="col-3">
												<img src="images/placeholder-product.jpg" width="60">
											</div>
											<div class="col-9">
												<h6><a href="item.html">Product Name</a></h6>
												<span class="text-muted">1x</span>
												<span class="emphasis">$49.00</span></div>
										</li>
										<li class="row">
											<div class="col-3">
												<img src="images/placeholder-product.jpg" width="60">
											</div>
											<div class="col-9">
												<h6><a href="item.html">Product Name</a></h6>
												<span class="text-muted">1x</span>
												<span class="emphasis">$49.00</span></div>
										</li>
										<li class="row">
											<div class="col-3">
												<img src="images/placeholder-product.jpg" width="60">
											</div>
											<div class="col-9">
												<h6><a href="item.html">Product Name</a></h6>
												<span class="text-muted">1x</span>
												<span class="emphasis">$49.00</span></div>
										</li>
									</ul>
									
									<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</section>
		
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-lg-3 sidebar-filter">
					<h3 class="mt-5 mb-5">Showing <span class="primary-color">12</span> Products</h3>
					<h6 class="text-uppercase">Categories</h6>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="category-1">
							<label class="custom-control-label" for="category-1">Accessories</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="category-2">
							<label class="custom-control-label" for="category-2">Coats &amp; Jackets</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="category-3">
							<label class="custom-control-label" for="category-3">Hoodies &amp; Sweatshirts</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="category-4">
							<label class="custom-control-label" for="category-4">Jeans</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="category-5">
							<label class="custom-control-label" for="category-5">Shirts</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="category-6">
							<label class="custom-control-label" for="category-6">Underwear</label>
						</div>
					</div>
					<div class="divider"></div>
					<h6 class="text-uppercase">Size</h6>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="filter-size-1">
							<label class="custom-control-label" for="filter-size-1">X-Small</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="filter-size-2">
							<label class="custom-control-label" for="filter-size-2">Small</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="filter-size-3">
							<label class="custom-control-label" for="filter-size-3">Medium</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="filter-size-4">
							<label class="custom-control-label" for="filter-size-4">Large</label>
						</div>
					</div>
					<div class="filter-checkbox">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="filter-size-5">
							<label class="custom-control-label" for="filter-size-5">X-Large</label>
						</div>
					</div>
					<div class="divider"></div>
					<h6 class="text-uppercase">Price</h6>
					<div class="price-filter">
						<input type="text" class="form-control" value="50" id="price-min">
						<input type="text" class="form-control" value="150" id="price-max">
					</div>
					<br />
					<br />
					<input id="ex2" type="text" class="slider " value="" data-slider-min="10" data-slider-max="200" data-slider-step="5" data-slider-value="[50,150]" />
					<div class="divider"></div>
						
					<a href="#" class="btn btn-lg btn-full-width btn-primary mt-2">Update Results</a></div>
				
				<div class="col-md-8 col-lg-9">
					<section class="products">
						<div class="container">
							<div class="row sorting mb-5">
								<div class="col-12">
									<div class="dropdown float-left">
										<label class="mr-2">Sort by:</label>
										<a class="btn btn-lg btn-white dropdown-toggle" data-toggle="dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Relevance <span class="caret"></span></a>
										<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Relevance</a>
											<a class="dropdown-item" href="#">Price Descending</a>
											<a class="dropdown-item" href="#">Price Ascending</a>
											<a class="dropdown-item" href="#">Best Selling</a></div>
									</div>
									<div class="btn-group float-right ml-3">
										<button type="button" class="btn btn-lg btn-white"><span class="fa fa-arrow-left"></span></button>
										<button type="button" class="btn btn-lg btn-white"><span class="fa fa-arrow-right"></span></button>
									</div>
									<div class="dropdown float-right">
										<label class="mr-2">View:</label>
										<a class="btn btn-lg btn-white dropdown-toggle" data-toggle="dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">12 <span class="caret"></span></a>
										<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">12</a>
											<a class="dropdown-item" href="#">24</a>
											<a class="dropdown-item" href="#">48</a>
											<a class="dropdown-item" href="#">96</a></div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
								<div class="col-md-6 col-lg-4 col-product">
									<figure>
										<img class="rounded-corners img-fluid" src="images/placeholder-product.jpg"	>
										<figcaption>
											<div class="thumb-overlay"><a href="item.html" title="More Info">
												<i class="fas fa-search-plus"></i>
											</a></div>
										</figcaption>
									</figure>
									<h4 class="mb-1"><a href="item.html">Product Name</a></h4>
									<p><span class="emphasis">$49.00</span></p>
								</div>
							</div>
							<div class="row sorting mb-5">
								<div class="col-12"><a class="btn"><i class="fas fa-arrow-up mr-2"></i> Back to top</a>
									<div class="btn-group float-right ml-3">
										<button type="button" class="btn btn-lg btn-white"><span class="fa fa-arrow-left"></span></button>
										<button type="button" class="btn btn-lg btn-white"><span class="fa fa-arrow-right"></span></button>
									</div>
									<div class="dropdown float-right">
										<label class="mr-2">View:</label>
										<a class="btn btn-white btn-lg dropdown-toggle" data-toggle="dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">12 <span class="caret"></span></a>
										<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">12</a>
											<a class="dropdown-item" href="#">24</a>
											<a class="dropdown-item" href="#">48</a>
											<a class="dropdown-item" href="#">96</a></div>
									</div>
								</div>
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<footer class="footer">
			<div class="container">
				<div class="row mb-5 text-center">
					<div class="col-sm-6 col-md-3 pt-2">
						<h5>Women's</h5>
						<ul class="nav-footer">
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
						</ul>
					</div>
					<div class="col-sm-6 col-md-3 pt-2">
						<h5>Men's</h5>
						<ul class="nav-footer">
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
						</ul>
					</div>
					<div class="col-sm-6 col-md-3 pt-2">
						<h5>Girl's</h5>
						<ul class="nav-footer">
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
						</ul>
					</div>
					<div class="col-sm-6 col-md-3 pt-2">
						<h5>Boy's</h5>
						<ul class="nav-footer">
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link Item</a></li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="container-fluid">
				<div class="divider"></div>
			</div>
			
			<div class="container">
				<div class="row">
					<div class="col-md-6 text-center text-md-left mt-2 mb-3 pt-1">
						<p class="copyright">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
					</div>
					<div class="col-md-6 text-center text-md-right mb-4">
						<ul class="social">
							<li><a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
							<li><a href="#" title="Twitter"><i class="fab fa-twitter"></i></a></li>
							<li><a href="#" title="Google+"><i class="fab fa-google"></i></a></li>
							<li><a href="#" title="Dribbble"><i class="fab fa-dribbble"></i></a></li>
							<li><a href="#" title="Instagram"><i class="fab fa-instagram"></i></a></li>
							<div class="clear"></div>
						</ul>
					</div>
				</div>
			</div>
		</footer>
						
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	
		<script type="text/javascript">
			
			
			// Without JQuery
			var slider = new Slider('#ex2', {
			});
			slider.on("slide", function(sliderValue) {
			document.getElementById("price-min").value = sliderValue[0];
			});
			slider.on("slide", function(sliderValue) {
			document.getElementById("price-max").value = sliderValue[1];
			});
			
		</script>
		
	</body>
</html>